import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

/**
 * Radio单选框组件
 * @element zss-radio
 */
@customElement('zss-radio')
export class ZssRadio extends LitElement {
  static styles = css`
    :host {
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      font-size: var(--zss-font-size-base);
      color: var(--zss-text-color-regular);
      user-select: none;
    }

    :host([disabled]) {
      cursor: not-allowed;
      color: var(--zss-text-color-disabled);
    }

    .radio {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      border: 1px solid var(--zss-border-color);
      border-radius: 50%;
      background-color: var(--zss-bg-color);
      transition: all 0.2s;
      margin-right: 8px;
    }

    .radio::after {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--zss-bg-color);
      transform: scale(0);
      transition: all 0.2s;
    }

    :host(:not([disabled])) .radio:hover {
      border-color: var(--zss-color-primary);
    }

    :host([checked]) .radio {
      background-color: var(--zss-color-primary);
      border-color: var(--zss-color-primary);
    }

    :host([checked]) .radio::after {
      transform: scale(1);
    }

    :host([disabled]) .radio {
      background-color: var(--zss-fill-color-light);
      border-color: var(--zss-border-color);
    }

    :host([checked][disabled]) .radio {
      background-color: var(--zss-text-color-disabled);
      border-color: var(--zss-text-color-disabled);
    }

    .radio-label {
      margin-left: 8px;
    }

    /* 尺寸 */
    :host([size="small"]) .radio {
      width: 12px;
      height: 12px;
    }

    :host([size="small"]) .radio::after {
      width: 5px;
      height: 5px;
    }

    :host([size="large"]) .radio {
      width: 16px;
      height: 16px;
    }

    :host([size="large"]) .radio::after {
      width: 7px;
      height: 7px;
    }

    /* 按钮样式 */
    :host([type="button"]) {
      display: inline-block;
    }

    :host([type="button"]) .radio-wrapper {
      display: inline-flex;
      align-items: center;
      padding: 8px 15px;
      border: 1px solid var(--zss-border-color);
      border-radius: var(--zss-border-radius-base);
      background-color: var(--zss-bg-color);
      transition: all 0.2s;
    }

    :host([type="button"]) .radio {
      margin-right: 0;
    }

    :host([type="button"]) .radio-label {
      margin-left: 0;
      margin-right: 0;
    }

    :host([type="button"][checked]) .radio-wrapper {
      background-color: var(--zss-color-primary);
      border-color: var(--zss-color-primary);
      color: var(--zss-bg-color);
    }

    :host([type="button"]:not([disabled])) .radio-wrapper:hover {
      border-color: var(--zss-color-primary);
    }

    :host([type="button"][disabled]) .radio-wrapper {
      background-color: var(--zss-fill-color-light);
      color: var(--zss-text-color-disabled);
    }
  `;

  /**
   * 单选框值
   * @attr value
   */
  @property({ type: String })
  value = '';

  /**
   * 是否选中
   * @attr checked
   */
  @property({ type: Boolean })
  checked = false;

  /**
   * 是否禁用
   * @attr disabled
   */
  @property({ type: Boolean })
  disabled = false;

  /**
   * 尺寸
   * @attr size
   */
  @property({ type: String })
  size: 'small' | 'default' | 'large' = 'default';

  /**
   * 类型
   * @attr type
   */
  @property({ type: String })
  type: 'default' | 'button' = 'default';

  private handleClick = () => {
    if (!this.disabled) {
      this.checked = true;
      
      this.dispatchEvent(new CustomEvent('change', {
        detail: {
          checked: this.checked,
          value: this.value
        }
      }));
    }
  };

  render() {
    const content = html`
      <div class="radio"></div>
      ${this.type === 'default' ? html`
        <span class="radio-label">
          <slot></slot>
        </span>
      ` : html`
        <slot></slot>
      `}
    `;

    if (this.type === 'button') {
      return html`
        <div class="radio-wrapper" @click=${this.handleClick}>
          ${content}
        </div>
      `;
    }

    return html`
      <div @click=${this.handleClick}>
        ${content}
      </div>
    `;
  }
}

/**
 * RadioGroup单选框组组件
 * @element zss-radio-group
 */
@customElement('zss-radio-group')
export class ZssRadioGroup extends LitElement {
  static styles = css`
    :host {
      display: inline-flex;
      align-items: center;
      gap: 16px;
    }

    :host([direction="vertical"]) {
      flex-direction: column;
      align-items: flex-start;
    }
  `;

  /**
   * 选中的值
   * @attr value
   */
  @property({ type: String })
  value = '';

  /**
   * 排列方向
   * @attr direction
   */
  @property({ type: String })
  direction: 'horizontal' | 'vertical' = 'horizontal';

  /**
   * 是否禁用
   * @attr disabled
   */
  @property({ type: Boolean })
  disabled = false;

  /**
   * 尺寸
   * @attr size
   */
  @property({ type: String })
  size: 'small' | 'default' | 'large' = 'default';

  /**
   * 按钮样式
   * @attr type
   */
  @property({ type: String })
  type: 'default' | 'button' = 'default';

  private handleRadioChange = (e: CustomEvent) => {
    const { value } = e.detail;
    this.value = value;
    
    this.dispatchEvent(new CustomEvent('change', {
      detail: this.value
    }));
  };

  private slotElement?: HTMLSlotElement;

  private handleSlotChange = () => {
    const nodes = this.slotElement?.assignedNodes() || [];
    const radios = nodes.filter((node): node is ZssRadio => 
      node instanceof ZssRadio
    );
    
    radios.forEach(radio => {
        radio.size = this.size;
        radio.type = this.type;
        radio.disabled = this.disabled || radio.disabled;
        radio.checked = radio.value === this.value;
        
        // 移除之前的事件监听器
        radio.removeEventListener('change', this.handleRadioChange as EventListener);
        // 添加新的事件监听器
        radio.addEventListener('change', this.handleRadioChange as EventListener);
      });
  };

  render() {
    return html`
      <slot @slotchange=${this.handleSlotChange}></slot>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'zss-radio': ZssRadio;
    'zss-radio-group': ZssRadioGroup;
  }
}